<template>
	<!-- <a-spin :spinning="spinning" size="large">  -->
    <div class="page-main single-result" :style="{width: modelWidth =='320'?pageWidth:pageWidthPc, height: modelWidth =='320'?pageHeight:pageHeightPc}" id="canvas" ref="imageDom" >
        <div v-if="personData&&personData.first">
            <div class="name">{{personData.first.familyName}}{{personData.first.realName}}</div>
            <!-- <div class="f-name">{{personData.first.familyName}}</div> -->
            <div class="f-name" 
				v-for="(item, index) in 
					onStringSplit(personData.first.familyName)" 
				:key="'familyName'+index"
            >{{item}}</div>
			<div class="des-box">
                <div class="f-info">
                    <div class="tit">
                        <i></i>姓氏介绍
                    </div>
                    <div class="content">
                        <p v-if="personData.first.familyNameDescription">{{personData.first.familyNameDescription}}</p>
                        <p v-else>数据暂未收录</p>
                    </div>
                </div>
                <div class="f-info">
                    <div class="tit">
                        <i></i>家规家训
                    </div>
                    <div class="content">
                        <p v-if="personData.first.roleContent">{{personData.first.roleContent}}</p>
                        <p v-else>数据暂未收录</p>
                        <!-- <p>一、愛人者人恆愛之，敬人者人恆敬之。我惡人人亦惡我，我慢人人亦慢我，此感應自然之理。切不可結怨於人，結怨於人辟如服毒，其毒日久必發，但有小大遲速不同耳。人家祖宗受人欺侮，其子孫傳説不忘，乘時遘會，終須報之。彼我同然，出爾反爾，豈可不戒也？</p>
                        <p>二、臨事讓人一步自有餘地，臨財放寬一分自有餘味。待人接物要看自己地步，若自己勝人一分，切宜自下一分，使不得一毫氣概。若自己遜人一分，切宜自重一分，使不得一毫諂侫。</p>
                        <p>板村蔡氏义派支譜</p> -->
                    </div>
                </div>
            </div>
            <div class="btm">
                <img :src="logo" alt="" class="logo">
                <img :src="mzlogo" alt="" class="mzlogo">
                <a :href="qriouslySkip" target="_blank">点击了解更多</a>
                <qriously :value="qriouslySkip" :size="100" class="qrcode"/>
                <!-- <img :src="qriouslySrc" class="qrcodeModal"> -->

                <!-- 二维码弹出框 -->
                <a-modal v-model="qrVisible" :footer="null" :mask="false" :width="modelWidth">
                    <img :src="qriouslySrc" class="qrcodeModal">
                </a-modal>

                <!-- 下载图片弹出框 -->
                <a-modal v-model="downloadVisible" :footer="null" :mask="true" :width="modelWidth">
                    <h5>长按图片进行更多操作</h5>
					<img :src="downloadImageSrc" class="downloadImageModal">
                </a-modal>
            </div>
        </div>
        <router-link to="/" class="go-home download" id="go-home">首页</router-link>
        <a href="javascript:" class="download displayNone" id="download" v-if="showBtn" @click="download">下载</a>
    </div>
	<!-- </a-spin> -->
</template>
<script>
    // import QRCode from 'qrcodejs2'
    export default {
        data(){
            return{
				spinning: false, // 加载中...
                qrVisible: false,
                downloadVisible: false, // 长按图片遮罩
                showBtn:true,
                pageWidth: '',
                pageHeight: '',
                pageWidthPc: '',
                pageHeightPc: '',
                familyName1: '',
                name1: '',
                personData: null, // 人物信息
                qrCode:require('./../../assets/img/qr.png'),
                logo:require('./../../assets/img/logo2.png'),
                mzlogo:require('./../../assets/img/mzlogo.png'),
                qrcodeUrl: 'https://jiapu.library.sh.cn/#/genealogyCenter?familyName=',
                qriouslySrc: '',
                downloadImageSrc: '', // 下载时图片
				downScrollX: 0, // 图片截取x轴位置
				downScrollY: 0, // 图片截取y轴位置
                modelWidth: '320'
            }
        },
        computed: {
            params(){
                return {
                    familyName1: this.familyName1,
                    name1: this.name1,
                }
            },
            qriouslySkip(){
                return this.qrcodeUrl + encodeURIComponent(this.familyName1);
            }
        },
        created() {
            this.init();
            window.onresize = ()=>{
                setInterval(()=>{
                    this.init()
                },500)
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.getPersonRoles();
                this.onQRCodeImg(); // 弹出框二维码
                setTimeout(() => {
                    this.onQrcode(); // 底部二维码点击
                }, 600);
            })
            // this.$mui.toast('欢迎体验Hello MUI');
        },
        methods:{
            init(){
                const fw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
                const fh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
                fw > 1100?this.modelWidth = "75%":this.modelWidth = "320";
                this.pageWidthPc = fw + "px";
                this.pageHeightPc = fh + "px";
                if(fw<fh){
                    this.pageWidth = fw+'px'
                    this.pageHeight = fh+'px'
                    this.rotate = '90deg'
                }else{
                    this.pageWidth = fh+'px'
                    this.pageHeight = fw+'px'
                    this.rotate = '0deg'
                }
            },
            qrcode(el, text) {
                // this.$nextTick(()=>{
                    let qrcode = this.$QRCode(el, {  
                        width: 232,  // 设置宽度 
                        height: 232, // 设置高度
                        text: text
                    }) 
                // }) 
            },
            onQrcode(){ // 底部二维码点击
                this.$Jquery('canvas')
                .click(()=>{
                    this.qrVisible = true;
                })
            },
            onQRCodeImg(){ // 弹出框二维码
                this.$QRCode.toDataURL(this.qriouslySkip)
                .then(url => {
                    this.qriouslySrc = url;
                })
                .catch(err => {
                    console.error(err)
                })
            },
            getRouterParmas(){
                let routerParmas = null;
                let _query = this.$route.query;
                if( !this.isEmptyObject(_query) && !this.isEmpty(_query.tipsSingleParams) ){
                    // routerParmas = JSON.parse(decodeURIComponent(_query.tipsSingleParams));
                    routerParmas = JSON.parse(_query.tipsSingleParams);
                }
                else {
                    routerParmas = JSON.parse(localStorage.tipsSingleParams);
                    // if( !this.isEmptyObject(routerParmas) ) routerParmas = JSON.parse(this.getCookie('tipsSingleParams'));
                }
                return routerParmas;
            },
            getPersonRoles(){
                let _routerParmas = this.getRouterParmas();
                this.familyName1  = _routerParmas.familyName;
                this.name1        = _routerParmas.name;
                this.$axios.get(this.$Common.getRoles, {params: this.params})
                .then((res) => {
                    let resultData = res.data;
                    this.personData = resultData.data;
                })
                .catch((err) => {
                    console.log(err);
                });
            },
            downloadIamge(canvas, name) {
                var alink = document.createElement('a');
                alink.download = name;
                alink.href = canvas;
                alink.target = '_blank';
                if (document.createEvent) {
                    let clickEvent = document.createEvent("MouseEvents");
                    clickEvent.initEvent('click', true, true);
                    alink.dispatchEvent(clickEvent);
                }
                else alink.click();

                // this.$FileSaver.saveAs(canvas, name);
            },
            download(){
				this.spinning = true; // 加载中...
                if( this.hasScrollbar('.des-box') || this.hasScrollbar('.f-info') ) {
                    this.pageWidth  = Number(this.pageWidth.replace('px', '')) * 1.2+'px';
                    this.pageHeight = Number(this.pageHeight.replace('px', '')) * 1.2+'px';
                    this.pageWidthPc  = Number(this.pageWidthPc.replace('px', '')) * 1.2+'px';
                    this.pageHeightPc = Number(this.pageHeightPc.replace('px', '')) * 1.2+'px';
                    this.downScrollX = this.$refs.imageDom.offsetLeft/2;
                    this.downScrollY = this.$refs.imageDom.offsetTop/2;
                
				}
                this.$nextTick(()=>{
                    // document.getElementById('canvas')
                    this.$Html2canvas(this.$refs.imageDom, {
                        x: 0, // 截取画布x轴坐标
                        y: 0, // 截取画布y轴坐标
                        scrollX: this.downScrollX,
                        scrollY: this.downScrollY,
                        scale: window.devicePixelRatio,
                        // height: this.$Jquery(this.$refs.imageDom)[0].clientHeight,
                        taintTest: true,
                        allowTaint: true,
                        useCORS: true,
                        ignoreElements:(element)=>{
                            if(element.id == 'download' || element.id == 'go-home') return true;
                        }
                    }).then(canvas=>{
                        this.downloadVisible = true;
                        this.downloadImageSrc = canvas.toDataURL('image/png', 1);
                        // this.downloadIamge(canvas.toDataURL('image/png', 1), 'codeImg.png');
						// if(this.plus.os.android || this.plus.os.ios) {
                        //     this.$FileSaver.saveAs(canvas.toDataURL(), 'codeImg.png');
                        //     this.$mui.toast('下载成功');
                        // }
                        // else 
                        // this.convertCanvasToImg(canvas);
						this.spinning = false; // 加载中...
                    }).catch((error)=>{
                        this.$mui.toast('图片下载异常!');
                        console.error('图片下载异常!', error);
                    });
                    this.init(); // 样式初始化
                })
            },
            convertCanvasToImg(canvas){
                const myBlob = this.dataURLtoBlob(canvas.toDataURL('image/png', 0.92))
                // const myBlob = this.dataURLtoBlob(canvas)
                let myUrl = URL.createObjectURL(myBlob)
                this.downImg(myUrl)
            },
            dataURLtoBlob(dataurl){
                let arr = dataurl.split(',')
                let mime = arr[0].match(/:(.*?);/)[1]
                let bstr = atob(arr[1])
                let n = bstr.length
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime })
            },
            base64ToBlob (code) {
                let parts = code.split(';base64,')
                let contentType = parts[0].split(':')[1]
                let raw = window.atob(parts[1])
                let rawLength = raw.length
                let uInt8Array = new Uint8Array(rawLength)
                for (let i = 0; i < rawLength; ++i) {
                    uInt8Array[i] = raw.charCodeAt(i)
                }
                return new Blob([uInt8Array], {type: contentType})
            },
            downImg(url){
                let a = document.createElement("a")
                let clickEvent = document.createEvent("MouseEvents");
                a.setAttribute("href", url)
                a.setAttribute("download", 'codeImg')
                a.setAttribute("target", '_blank')
                clickEvent.initEvent('click', true, true)
                a.dispatchEvent(clickEvent);
            },
        }
    }
</script>

<style lang="less" scoped>
    /deep/p{
        color: inherit;
    }
    /deep/.qrcode{    
        position: absolute;
        bottom: -6px;
        transform: scale(0.5);
        width: 16rem;
        canvas{
            position: relative;
            width: 20%;
            height: auto;
        }
    }
    /deep/.ant-modal-content{    
        background-color: rgba(255, 255, 255, .9);
    }
    /deep/.ant-modal-body{
        text-align: center;
        // .qrcodeModal{
        //     display: inline-block;
        //     margin: 0 5%;
        // }
		
		.downloadImageModal{
			width: 100%;
		}
    }
    @media screen and (max-height: 640px){
        .single-result{
            .des-box{
                max-height: 16.3rem;
            }
        }
    }
    .single-result{
        .name{
            font-weight: bold;
            top: 1.8rem;
            color: #000;
        }
        .f-name{
			position: relative;
            line-height: 3.7rem;
            top: 2.8rem;
            font-weight: bold;
            color: #000;
			display: inline-block;
			margin: 0 0.5px;
        }
        .des-box{
            top: 7rem;
            right: 1rem;
        }
        .go-home{
            right: 4.3rem!important;
        }
    }

    @media screen and (min-width: 1100px){
        // 个人详情页开始
        .single-result {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-size: cover;
            background-image: url("../../assets/img/singleresultbg_pc.jpg");

            // 截屏样式
            &.box-sty {
                .left-result,
                .right-result {
                    .des-box {
                        .f-info {
                            margin-bottom: 0;
                            transform: scale(0.8) translate(-65px, 0px);
                            width: 123%;
                        }
                    }
                }
            }
        
            a.download {
              position: absolute;
              right: 3.9rem;
              bottom: 1.2rem;
              width: 1.4rem;
              height: 0.32rem;
              line-height: 0.3rem;
              font-size: 0.16rem;
            }

            .go-home {
                right: 5.5rem !important;
            }
        
            .name {
              display: none;
            }
        
            .f-name {
              width: 0.9rem;
              height: 0.9rem;
              text-align: center;
              line-height: 0.8rem;
              background-size: 100% 100%;
              margin-right: 8px;
              background-image: url("../../assets/img/wordbg.png");
              font-size: 0.65rem;
              top: 1.83rem;
              left: 3.71rem;
            }
        
            .btm {
              position: absolute;
              width: 2.62rem;
              height: 0.57rem;
              bottom: 1rem;
              left: 4.23rem;
              margin-left: 0;
              transform: scale(1);
        
              // text-align: center;
              a {
                position: absolute;
                bottom: -0.3rem;
                transform: scale(.4);
                font-size: .22rem;
                width: 2.62rem;
                left: 0.18rem;
                text-align: center;
                color: #000;
              }

              .qrcode {
                  width: 5rem;
                  bottom: -30px;
              }
        
              img {
                position: absolute;
                width: 0.52rem;
                height: 0.52rem;
                bottom: 0;
                left: 1rem;
        
                // margin: 5px 10px;
                &.logo {
                  width: 0.92rem;
                  height: 0.36rem;
                  bottom: 0.08rem;
                  left: 0;
                }
        
                &.mzlogo {
                  width: 0.48rem;
                  height: 0.57rem;
                  bottom: 0;
                  right: 0;
                }
              }
            }
        
            .des-box {
              position: absolute;
              top: 3.23rem;
              left: 3.71rem;
              right: 3.74rem;
              bottom: 1.8rem;
              overflow-y: hidden;
              display: flex;
        
              .f-info {
                width: 48%;
                height: 100%;
                margin-right: 4%;
                overflow: auto;
        
                &:last-child {
                  margin-bottom: 0;
                }
        
                .content {
                  line-height: 1.8;
                  margin-top: 0;
                  padding-left: 0;
                  padding: 0.11rem 0.36rem;
                  overflow: auto;
                  color: #000;
        
                  p {
                    margin: 0;
                    text-indent: 2em;
                    text-align: justify;
                    font-size: 16px;
                  }
                }
        
                .tit {
                  font-size: 0.2rem;
                  color: #a50319;
                  display: flex;
                  align-items: center;
                  width: 100%;
        
                  i {
                    width: 0.25rem;
                    height: 0.24rem;
                    background-size: 100% 100%;
                    background-image: url("../../assets/img/icon1.png");
                    margin-right: .11rem;
                  }
                }
              }
            }
        }
    }

    @media screen and (min-width: 980px) and (max-width: 1100px) {
        .single-result{
            .f-name {
                line-height: 3rem;
            }
            .name {
                top: 2.8rem;
                right: 2.6rem;
            }

            .des-box {
                bottom: 5.5rem;
                right: 2.5rem;
                
                .f-info {

                    .tit {
                        font-size: .3rem;
                        font-weight: bold;

                        i {
                            width: 0.4rem;
                            height: 0.4rem;
                            margin-left: 0;
                            margin-right: 0.11rem;
                        }
                    }

                    .content {
                        padding-left: 0.5rem;
                        line-height: 1.8;

                        p {
                            font-size: 16px;
                        }
                    }
                }
            }

            .go-home {
                font-size: 20px;
                height: 0.8rem !important;
                line-height: 0.75rem !important;
                right: 1.8rem !important;
                bottom: 4rem !important;
            }
        } 
    
        .displayNone {
            display: none;
        }
    }
</style>